<template>
    <div class="list">
        <ul id="showGoods" v-if="list.length">

            <!-- 点击商品跳转详情页 =>  携带商品_id作为数据   (详情页根据id查找数据和渲染) -->
            <!-- 步骤:  1. 跳转(router-link )  2. 携带数据 (怎么携带数据?) -->

            <!-- 自己拼接 太麻烦-->
            <!-- <router-link tag="li" :to="'/detail/' + item._id" v-for="item in list" :key="item._id">
                <img :src="item.img" alt="">
                <p class="price">¥{{ item.price }}</p>
                <p class="name">{{ item.title }}</p>
            </router-link> -->

            <!-- 简易写法 -->
            <!-- to 可以动态绑定一个对象 {path:路径,name:路由名称,params:路径参数,query:地址栏参数} -->
            <!-- 
                path 跳转的路径 (对应路径跳转页面)
                name 对应路由的名称跳转对应路径

                params: 跳转时传递动态路径参数   /detail/xxx
                query: 

                注意: params和path不能同时使用


             -->


            <router-link tag="li" :to="{ name: 'detail', params: { id: item._id } }" v-for="item in list"
                :key="item._id">
                <img :src="item.img" alt="">
                <p class="price">¥{{ item.price }}</p>
                <p class="name">{{ item.title }}</p>
            </router-link>
        </ul>
        <ul v-else>暂无数据</ul>
    </div>
</template>

<script>
import axios from "axios";
// console.log(axios);
export default {
    name: "ListView",
    data() {
        return {
            wd: "",
            col: "_id",
            type: "asc",
            page: 1,
            size: 10,
            maxPage: null,
            list: [],
        }
    },
    methods: {
        getData() {
            // "http://localhost:3000/goods/get?wd=&col=_id&type=asc&page=1&size=10"
            // wd 搜索的关键词 ""查询所有数据
            // col 排序的字段名 (_id title price)
            // type 排序的方式  asc(升序)  desc(降序)
            // page 第几页
            // size 每页显示多少条 
            axios.get("http://localhost:3000/goods/get", {
                params: this.search
            }).then(res => res.data).then(result => {
                console.log(result);
                var { status, list, maxPage } = result;
                if (status == 200) {
                    this.list = list;
                    this.maxPage = maxPage;
                }
            })
        }
    },
    computed: {
        search() {
            return {
                wd: this.wd,
                col: this.col,
                type: this.type,
                page: this.page,
                size: this.size,
            }
        }
    },
    watch: {
        search: function () {
            this.getData();
        }
    },
    mounted() {
        this.getData();
    }
}
</script>


<style scoped>
.checkbox {
    display: inline-block;

}

.checkbox .iconfont {
    display: block;
    font-style: normal;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    font-size: 20px;
    border: 1px solid #e0e0e0;
    user-select: none;
    color: #fff;
}

.checkbox .iconfont:hover {
    color: #757575;
}

.checkbox input:checked+.iconfont {
    background-color: #ff6700;
    border-color: #ff6700;
    color: #fff;
}

/* 商品展示 */
#showGoods {
    /* width: 1226px; */
    /* width: 100%; */
    padding: 0.2rem;
    margin: 0 auto;
    margin-top: 50px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

#showGoods li {
    width: 45%;
    box-sizing: border-box;
    padding: 10px;
    font-size: 13px;
    line-height: 20px;
}

#showGoods li:hover {
    box-shadow: 0 0 1px 2px rgba(0, 0, 0, 0.2);
}

#showGoods li img {
    width: 70%;
    display: block;
    margin: 20px auto;
}

#showGoods li .price {
    color: red;
}

#showGoods li .name {
    /* 多行文本溢出隐藏 */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
}

#searchBox {
    width: 1226px;
    height: 32px;
    margin: 50px auto;
    display: flex;
    font-size: 13px;
}

#searchBox .searchBar {
    width: 300px;
    height: 32px;
    border: 1px solid #333;
    display: flex;
}

#searchBox .searchBar .searchCon {
    outline: none;
    border: 0;
    width: 268px;
    height: 32px;
}

#searchBox .searchBar .searchBtn {
    flex: 1;
    background-color: grey;
}

.orderColBox,
.orderTypeBox {
    margin-left: 20px;
    line-height: 32px;
    padding: 0 10px;
    border: 1px dashed #333;
}

.orderColBox .active {
    color: pink;
}

.orderTypeBox .active {
    color: pink;
}

.showPageBox {
    margin-left: 20px;
    line-height: 32px;
}

.showPageBox select {
    height: 32px;
    outline: none;
    vertical-align: middle;
}
</style>
